<template>
    <main-page>
        <data-table ref="dataTableRef" :columns="columns" :params="params" api="/online">
            <template #search>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="params.username"/>
                </el-form-item>
            </template>
        </data-table>
    </main-page>
</template>

<script lang="ts" setup>
import {getCurrentInstance, ref, h} from "vue";
import store from '@/store'
import {ElButton, ElTag} from "element-plus";
import SvgIcon from "@/components/svg-icon/index.vue";
import DataTable from '@/components/data-table/index.vue';
import {service} from "@/utils";
import MainPage from "@/layout/other/MainPage.vue";

defineOptions({name: "MonitorOnline"})

const {user} = store.userStore;
const {proxy} = getCurrentInstance() as any;

const dataTableRef = ref<InstanceType<typeof DataTable>>();
const params = ref({
    username: undefined
});
const columns = ref([
    {prop: "username", label: "用户名", align: "left", width: 150, search: true},
    {prop: "loginTime", label: "登录时间", width: 250},
    {prop: "ip", label: "登录IP", width: 250},
    {prop: "loginAddress", label: "登录地点", minWidth: 190},
    {
        type: "action", width: 280,
        render: ({row}: any) => {
            if (row.username === user?.username) {
                return h(ElTag, {type: 'success'}, {default: () => '当前用户'});
            } else {
                const item = proxy.$auth('user:kickout');
                if (item !== false) {
                    return h(ElButton, {link: true, type: 'danger', onClick: () => onDelete(row)}, {
                        icon: () => h(SvgIcon, {icon: item['icon']}),
                        default: () => item['title']
                    });
                } else {
                    return null;
                }
            }

        }
    },
])

// 强制下线
const onDelete = (row: {username: string}) => {
    service.confirm(`确定对用户名[${row.username}]进行强制下线操作?`, {
        url: `/kickout/${row.username}`,
        success: dataTableRef.value?.refresh
    })
};
</script>
